<template>
    <div class="users">
        <div class="top">
            <el-input placeholder="请输入内容" v-model="params.query" class="input-with-select ssys">
                <el-button slot="append" icon="el-icon-search" @click="ssadd"></el-button>
            </el-input>
            <el-button type="primary" @click="addtrue">添加用户</el-button>
        </div>
        <!-- 表格 -->
        <template>
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column type="index" label="#">
                </el-table-column>
                <el-table-column prop="username" label="姓名">
                </el-table-column>
                <el-table-column prop="email" label="邮箱">
                </el-table-column>
                <el-table-column prop="mobile" label="电话">
                </el-table-column>
                <el-table-column prop="role_name" label="角色">
                </el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="scope">
                        <el-switch @click.native="states(scope.row)" v-model="scope.row.mg_state" active-color="#13ce66"
                            inactive-color="#ff4949">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="260">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" @click="edit(scope.row)"></el-button>
                        <el-button type="danger" icon="el-icon-delete" @click="del(scope.row.id)"></el-button>
                        <el-button type="warning" icon="el-icon-s-tools" @click="qxtrue(scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <!-- 分页 -->
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="params.pagenum" :page-sizes="[10, 20, 30, 40]" :page-size="params.pagesize"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <!-- 添加编辑弹出层 -->
        <el-dialog :title="title" :visible.sync="dialogVisible" width="30%">
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                class="demo-ruleForm">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="ruleForm.username" :disabled="title == '编辑用户'"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password" v-if="title == '添加用户'">
                    <el-input type="password" v-model="ruleForm.password"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="ruleForm.email"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="mobile">
                    <el-input v-model="ruleForm.mobile"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="add">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 分配权限弹出框 -->
        <el-dialog title="分配权限" :visible.sync="dialogVisibleqx" width="40%">
            <p>当前的用户: <span>{{ form.username }}</span> </p>
            <p>当前的角色: <span>{{ form.role_name }}</span> </p>
            <p class="js">
                分配新角色:
                <el-select v-model="form.region" placeholder="请选择活动区域">
                    <el-option v-for="item in permissionsList" :label="item.roleName" :value="item.id"
                        :key="item.id"></el-option>
                </el-select>
            </p>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleqx = false">取 消</el-button>
                <el-button type="primary" @click="qxadd">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    getusers, gettjusers, getbjusers,
    getztusers, getdelusers, getroles, getqxusers
} from "../utils/api"
export default {
    data() {
        return {
            permissionsList: [],
            dialogVisibleqx: false,//权限弹出层
            idq: 0,//权限id
            idx: -1,
            form: {
                username: "",
                role_name: '',
                region: ""
            },
            //添加数据
            ruleForm: {
                username: "",
                password: "",
                email: "",
                mobile: ""
            },
            //正则
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' }
                ],
                mobile: [
                    { required: true, message: '请输入电话', trigger: 'blur' }
                ],
            },
            // 弹出层名字
            title: "",
            // 用户列表参数
            params: {
                query: "",
                pagenum: 1,
                pagesize: 10,
            },
            //列表数据
            tableData: [],
            //总条数
            total: 0,
            //弹出层状态
            dialogVisible: false
        }
    },
    methods: {
        //请求用户列表数据
        getDataUsers() {
            getusers(this.params).then(res => {
                console.log(res);
                this.tableData = res.data.users
                this.total = res.data.total
            })
        },
        //分页条数点击
        handleSizeChange(val) {
            this.params.pagesize = val
            this.getDataUsers()
        },
        //分页页数点击
        handleCurrentChange(val) {
            this.params.pagenum = val
            this.getDataUsers()
        },
        // 搜索事件
        ssadd() {
            this.getDataUsers()
        },
        // 触发添加弹出层
        addtrue() {
            this.dialogVisible = true
            this.title = "添加用户"
            this.ruleForm = {}
        },
        // 添加
        add() {
            if (this.idx == -1) {
                //添加用户
                gettjusers(this.ruleForm).then(res => {
                    console.log(res);
                    if (res.meta.status == 201) {
                        this.$message({
                            message: res.meta.msg,
                            type: 'success'
                        });
                    }
                    this.getDataUsers()
                })
            } else {
                //编辑用户
                getbjusers(this.ruleForm).then(res => {
                    console.log(res);
                    if (res.meta.status == 200) {
                        this.$message({
                            message: res.meta.msg,
                            type: 'success'
                        });
                    }
                    this.getDataUsers()
                })
            }
            // this.getDataUsers()
            this.dialogVisible = false
        },
        // 出发编辑弹出层
        edit(row) {
            this.title = "编辑用户"
            this.dialogVisible = true
            this.ruleForm = { ...row }
            this.idx = row.id
        },
        //修改状态
        states(row) {
            console.log(row);
            let params = {
                id: row.id,
                type: row.mg_state
            }
            getztusers(params).then(res => {
                console.log(res);
                if (res.meta.status == 200) {
                    this.$message({
                        message: res.meta.msg,
                        type: 'success'
                    });
                } else {
                    this.$message({
                        message: res.meta.msg,
                        type: 'warning'
                    });
                }
            })
        },
        //删除
        del(id) {
            getdelusers(id).then(res => {
                console.log(res);
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.getDataUsers()
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });


            })
        },
        //点击权限弹出层
        qxtrue(row) {
            this.dialogVisibleqx = true
            this.form = { ...row }
            this.idq = row.id
        },
        // 请求权限数据
        getper() {
            getroles().then(res => {
                console.log(res);
                this.permissionsList = res.data
            })
        },
        qxadd() {
            let obj = { id: this.idq, rid: this.form.region }
            console.log(obj);
            getqxusers(obj).then(res => {
                console.log(res);
                if (res.meta.status == 200) {
                    this.$message({
                        message: res.meta.msg,
                        type: 'success'
                    });
                }
                this.getDataUsers()
                this.dialogVisibleqx = false
            })
        }
    },
    created() {
        this.getDataUsers()//调用用户列表数据
        this.getper()//调用用户列表权限数据
    },
    mounted() {

    },
    components: {

    },
    computed: {

    },
    watch: {

    },
}
</script>

<style lang='scss' scoped>
.users {
    width: 100%;
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;

    .top {
        width: 100%;

        .ssys {
            width: 30%;
            margin-right: 20px;
        }
    }

    p {
        margin-top: 20px;
    }

    .js {
        display: flex;

    }
}
</style>
